<template>
  <div class="app-container">
    <div style="width: 30%;float: left;">
      <div>
        <el-form :inline="true" size="small">
          <el-form-item>
            <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :highlight-current-row="true" @row-click="query"
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;"
        >
          <el-table-column
            prop="discountName"
            header-align="center"
            label="折扣方案名字"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            header-align="center"
            label="状态"
          >
            <template v-slot="{ row }">
              <el-tag type="success" v-show="row.status === 1">启用</el-tag>
              <el-tag type="danger" v-show="row.status === 2">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            width="100"
            label="操作"
          >
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click.stop="addOrUpdateHandle(row.discountId)">修改</el-button>
              <el-button type="text" size="small" @click.stop="deleteHandle(row.discountId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalPage > 0"
          :total="totalPage"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDataList()"
        />
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/>
      </div>
    </div>
    <div style="width: 65%; float: right;">
      <DisCountDetail ref="DisCountDetailRef"/>
    </div>
  </div>

</template>

<script>
import AddOrUpdate from './components/activityDiscountAddOrUpdate.vue'
import DisCountDetail from './components/activityDiscountDetail.vue'
import { deleteDiscountsByIds, pageActivityDiscount } from '@/api/marketing/activity/discount'

export default {
  data() {
    return {
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        discountName: undefined
      },
      dataList: [],
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate,
    DisCountDetail
  },
  created() {
    this.getDataList()
  },
  methods: {
    query(row, column, event) {
      this.$nextTick(() => {
        this.$refs.DisCountDetailRef.getDataList(row.discountId)
      })
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      pageActivityDiscount().then(response => {
        this.dataList = response.rows
        this.totalPage = response.total
        this.dataListLoading = false
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.discountId
      })
      this.$modal.confirm('删除方案，将会删除方案下的所有折扣菜品，是否进行操作').then(() => {
        deleteDiscountsByIds(ids).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.getDataList()
        })
      })
    }
  }
}
</script>
